<template>
	<view v-if="toastPopupShow" class="toastPopupcontent"
		:style="{ background: toastType === 'popup' ? 'rgba(0,0,0,0.5)' : '' }">
		<block v-if="toastType === 'popup'">
			<view class="popup_box">
				<view class="toast_title">{{ toastTitle }}</view>
				<block v-if="showIcon">
					<image class="show_icon"
						src="https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/cart/Dividersx.png">
					</image>
				</block>
				<view class="toast_msg">{{ toastMsg }}</view>
				<view class="btn_box">
					<view class="btn_style cancel_btn" @click.stop="handleBtnClick('cancel')">{{ cancelBtn.text }}
					</view>
					<view class="btn_style confirm_btn" @click.stop="handleBtnClick('confirm')">{{ confirmBtn.text }}
					</view>
				</view>
			</view>
		</block>
		<block v-if="toastType === 'toast'">
			<view class="toast_box">
				<rich-text class="toast_msg_br" :nodes="msgBr"></rich-text>
			</view>
		</block>
	</view>
</template>

<script>
export default {
	data() {
		return {
			toastPopupShow: false,
			toastType: "", // toast若提示，popup弹窗
			toastMsg: "",
			toastTitle: "",
			toastMsg_br: '',
			showIcon: false,
			confirmBtn: {
				type: 'confirm',
				text: "确定",
				enable: false
			},
			cancelBtn: {
				type: 'cancel',
				text: "取消",
				enable: false
			},
			callBackData: null
		}
	},
	computed: {
		msgBr() {
			try {
				return this.toastMsg.replace(/\n/g, '<br/>')
			} catch (e) {
				return this.toastMsg;
			}
		}
	},
	methods: {
		/**
		 * 展示提示框
		 * @param {Object} msg 提示文本
		 * @param {Object} title 标题
		 * @param {Object} showIcon 是否展示标题图标
		 * @param {Object} callBackData 需要暂存回传的数据
		 */
		showPopup({
			msg,
			title = "提示",
			showIcon = true,
			callBackData
		}) {
			if (this.toastPopupShow) return;
			this.toastPopupShow = true;
			this.toastType = 'popup';
			this.toastMsg = msg || "";
			this.toastTitle = title;
			this.showIcon = showIcon;
			this.callBackData = callBackData || null;
		},
		/**
		 * 展示弱提示
		 * @param {Object} msg 弱提示文本
		 * @param {Object} duration 持续时间 默认3秒
		 */
		showToast(msg, duration = 3000) {
			if (this.toastPopupShow) return;
			this.toastPopupShow = true;
			this.toastType = 'toast';
			this.toastMsg = msg;
			setTimeout(() => {
				this.handleResetData();
			}, duration)
		},
		//  页面跳转点击
		handleBtnClick(type) {
			this.$emit('onToastPopupClick', {
				type,
				callBackData: this.callBackData
			})
			//	关闭弹窗
			this.handleResetData();
		},
		//	关闭弹窗 参数重置
		handleResetData() {
			this.toastPopupShow = false;
			this.toastType = "";
			this.toastMsg = "";
			this.toastTitle = "";
			this.showIcon = false;
		}
	}
}
</script>

<style lang="scss" scoped>
.toastPopupcontent {
	width: 750rpx;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 999999;

	.popup_box {
		width: 654rpx;
		height: 620rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-direction: column;
		padding: 128rpx 64rpx 96rpx 64rpx;
	}

	.toast_box {
		background-color: #000;
		padding: 24rpx 32rpx;
	}

	.toast_msg_br {
		text-align: center;
		font-size: 28rpx;
		line-height: 48rpx;
		color: #fff;
		font-family: FrankNew-Regular, NotoSansSC-Regular;
	}

	.toast_title {
		font-family: FrankNew-Medium, NotoSansSC-Medium;
		font-size: 36rpx;
		line-height: 52rpx;
		color: #000;
		text-align: center;
		margin-bottom: 20rpx;
	}

	.show_icon {
		width: 182rpx;
		height: 56rpx;
	}

	.toast_msg {
		font-size: 28rpx;
		line-height: 48rpx;
		font-family: FrankNew-Regular, NotoSansSC-Regular;
		color: #757575;
		text-align: center;
		margin-top: 60rpx;
		margin-bottom: 80rpx;
	}

	.btn_box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-evenly;

		.btn_style {
			font-size: 28rpx;
			width: 255rpx;
			height: 80rpx;
			line-height: 72rpx;
			border-radius: 48rpx 16rpx 48rpx 48rpx;
			border: 2px solid #000000;
			text-align: center;
			font-family: NotoSansSC-Medium;
		}

		.cancel_btn {
			background-color: transparent;
		}

		.confirm_btn {
			background-color: #000;
			color: #fff;
		}
	}
}
</style>